<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span class="c-gray en">&gt;</span> 用户管理<span class="c-gray en">&gt;</span> 设置角色</nav>
	<div id="sectionContent" class="Hui-article">
		<article class="page-container">
			<form name="operationForm" class="form form-horizontal" id="form-admin-add">
				<div class="row cl">
          <div class="col-xs-5">
              <fieldset>
                  <legend>角色列表</legend>
                  <select id="roleList" multiple="multiple" size="10" class="select" ondblclick="moveOption(document.operationForm.roleList, document.operationForm.userRoleList,false);">
                      <option class="list-group-item" v-for="row in result.content" value="{{row.id}}">{{row.name}}</option>
                  </select>
              </fieldset>
            </div>
            <div class="col-xs-1">
                <div class="row" style="padding-top: 100px">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" onclick="moveOption(document.operationForm.roleList, document.operationForm.userRoleList,false)"><i class="Hui-iconfont">&#xe6d7;</i></button >
                        </br><button type="button" class="btn btn-default" onclick="moveOption(document.operationForm.roleList, document.operationForm.userRoleList,true)"><i class="Hui-iconfont">&#xe67a;</i></button>
                        </br><button type="button" class="btn btn-default" onclick="moveOption(document.operationForm.userRoleList, document.operationForm.roleList,true)"><i class="Hui-iconfont">&#xe678;</i></button>
                        </br><button type="button" class="btn btn-default" onclick="moveOption(document.operationForm.userRoleList, document.operationForm.roleList,false)"><i class="Hui-iconfont">&#xe6d4;</i></button >
                    </div>
                </div>
            </div>
            <div class="col-xs-5">
                <fieldset>
                    <legend>所属角色</legend>
                    <select id="userRoleList" multiple="multiple" size="10" class="select" ondblclick="moveOption(document.operationForm.userRoleList, document.operationForm.roleList,false);">
                        <option class="list-group-item" v-for="row in userRoles" value="{{row.id}}">{{row.name}}</option>
                    </select>
                </fieldset>
            </div>
				</div>
				<div class="row cl">
					<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
						<input class="btn btn-primary" type="button" v-on:click="saveData()" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" style="margin-right:30px;">
						<input class="btn" type="button" onclick="javascript:history.go(-1)" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
					</div>
				</div>
			</form>
		</article>
	</div>
<script type="text/javascript" >
      function moveOption(e1, e2,isAll){
          try{
              for(var i=0;i<e1.options.length;i++){
                  if(isAll || e1.options[i].selected){
                      var e = e1.options[i];
                      if(checkMoveOption(e.value, e2)){
                          var op = new Option(e.text, e.value);
                          op.className= "list-group-item";
                          e2.options.add(op);
                      }
                      e1.remove(i);
                      i=i-1
                  }
              }
          }catch(e){
              console.error(e);
          }
      }

      function checkMoveOption(value,e2){
          for(var i=0;i<e2.options.length;i++){
              var e = e2.options[i];
              if(e.value == value){
                  return false;
              }
          }
          return true;
      }
  </script>

  <script>
      new Vue({
          el:'#sectionContent',
          http: authorization(),
          data:{
              result:{},
              userRoles:[]
          },
          created:function(){
              this.$http.get('/restful/base/v1.0/role/1/100').then((response) => {
                  this.result = responseObj(response).data;
              }).catch(function(response) {
                  alert(errorMsg(response));
              });

              this.$http.get('/restful/base/v1.0/auth/user/roles?subscriberId='+getQueryString('id')).then((response) => {
                  this.userRoles = responseObj(response).data;
              }).catch(function(response) {
                  alert(errorMsg(response));
              });
          },
          methods:{
              backToList:function(){
                  window.parent.location.href="#!view/system/sub/subscriber-list.html?"+Math.random();
              },
              saveData:function(){
                  this.$http.post('/restful/base/v1.0/auth/setting/user/roles?subscriberId='+getQueryString('id')+"&roles="+$("#userRoleList option").map(function(){return $(this).val();}).get().join(",").split(",")).then((response) => {
                      this.backToList();
                  }).catch(function(response) {
                      alert(errorMsg(response));
                  });
              }
          }
      });
  </script>
